<template>
  <BlankLayout>
    <div class="register">
      <div class="logo">
        <img src="/images/logo.svg" alt="logo" />
      </div>
      <div class="title"><span class="blod">创建账户</span></div>
      <div class="tips">已有账户？<router-link to="/login" class="login-link">登录</router-link></div>
      <el-form :model="formData" :rules="rules" ref="formRef" @submit.native.prevent="handleSubmit(formRef)">
        <el-form-item>
          <div class="name-inputs">
            <el-input v-model="formData.lastName" placeholder="姓" class="input-field" />
            <el-input v-model="formData.firstName" placeholder="名" class="input-field" />
          </div>
        </el-form-item>

        <el-form-item>
          <el-input type="email" v-model="formData.email" placeholder="工作邮箱" class="input-field" />
        </el-form-item>

        <el-form-item>
          <el-checkbox-group v-model="formData.accessWorkspace">
            <el-checkbox> 访问工作区 <span class="blod">（需要公司电子邮件）</span> </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-input type="password" v-model="formData.password" placeholder="密码" class="input-field" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formData.job" placeholder="你是做什么工作的？" class="input-field" />
        </el-form-item>

        <el-form-item>
          <el-checkbox-group v-model="formData.notifications">
            <el-checkbox>将提示、教程和新闻发送到我的收件箱</el-checkbox>
            <br />
            <el-checkbox>我同意<span class="blod">服务条款</span>*</el-checkbox>
            <el-checkbox>我同意<span class="blod">隐私政策</span></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" native-type="button" class="register-button" @click="handleSubmit(formRef)">
            注册
          </el-button>
        </el-form-item>
      </el-form>

      <el-divider>
        <span class="el-divider-text">或者</span>
      </el-divider>
      <div class="phone-register">用手机号注册</div>
    </div>
  </BlankLayout>
</template>

<script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  const formData = ref({
    lastName: "",
    firstName: "",
    email: "",
    password: "",
    job: "",
    accessWorkspace: [],
    notifications: [],
  });

  const rules = {
    lastName: [{ required: true, message: "请输入姓", trigger: "blur" }],
    firstName: [{ required: true, message: "请输入名", trigger: "blur" }],
    email: [
      { required: true, message: "请输入工作邮箱", trigger: "blur" },
      { type: "email", message: "请输入有效的邮箱地址", trigger: ["blur", "change"] },
    ],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    job: [{ required: true, message: "请输入工作类型", trigger: "blur" }],
  };

  const handleSubmit = formEl => {
    formEl.validate(valid => {
      if (valid) {
        console.log("提交成功", formData.value);
      } else {
        console.log("提交失败");
        return false;
      }
    });
  };
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .register {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #929292;
    .blod {
      color: #000;
      font-weight: 550;
    }
    .logo {
      width: 50%;
      margin-bottom: 20px;
    }
    .title {
      font-size: 44px;
      font-weight: 500;
      margin-bottom: 20px;
    }
    .tips {
      color: #929292;
      margin-bottom: 20px;

      .login-link {
        color: #703ffa;
      }
    }
    .el-form {
      width: 100%;
      font-size: 18px;
      color: #929292;

      .el-checkbox {
        :deep(.el-checkbox__label) {
          font-size: 16px;
          color: #929292;
        }
        :deep(.el-checkbox__inner) {
          width: 16px;
          height: 16px;
        }
      }

      .phone-register {
        text-align: center;
        margin: 10px 0;
        color: #5c5c5c;
      }
      .input-field {
        font-size: 16px;
        height: 50px;
        :deep(.el-input__wrapper) {
          padding: 10px;
          background: #f0f0f0 !important;
          border-radius: 10px;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
            border-radius: 8px;
            &::placeholder {
              color: #929292;
            }
          }
        }
      }
      .register-button {
        background-color: #703ffa;
        color: #fff;
        width: 100%;
        font-size: 16px;
        height: 50px;
        border-radius: 10px;
      }

      .name-inputs {
        display: flex;
        font-size: 18px;
        gap: 10px;
        width: 100%;
      }
    }
    .el-divider-text {
      color: #929292;
    }
  }
  @media (max-width: $breakpoint-mobile) {
    .register {
      max-width: 100%;
      padding: 20px;
      .title {
        font-size: 32px;
      }
      .el-form {
        font-size: 16px;
        .name-inputs {
          flex-direction: column;
        }
        .el-checkbox {
          white-space: normal;
          word-break: break-word;
          :deep(.el-checkbox__label) {
            font-size: 14px;
          }
          :deep(.el-checkbox__inner) {
            width: 14px;
            height: 14px;
          }
        }
        .input-field {
          font-size: 16px;
          height: 40px;
        }
        .register-button {
          font-size: 16px;
          height: 40px;
        }
      }
    }
  }
</style>
